import React, { useState } from "react";
//1. 导入
import { useEffect } from "react";
export default function EffectCom() {
  //声明一个状态
  let [count, setCount] = useState(0);
  let [count2, setCount2] = useState(100);

  //2. useEffect 的调用
  // useEffect(() => {
  //   //该回调函数将会在组件挂载完成以及组件更新完成 自动执行
  //   console.log('run run run');
  // });

  //只会在组件挂载完成执行 
  // useEffect(() => { 
  //   console.log('mount mount mount');
  //   //
  //   return () => {
  //     //该回调函数将会在组件卸载之前, 自动执行
  //     console.log('unmount unmount unmount')
  //   }
  // }, []);//第二个参数是个数组, 该数组设置『回调函数的依赖项』

  //依赖项的演示
  // useEffect(() => {
  //   console.log('run....');
  // }, [count]);//该回调函数在组件挂载完毕会执行, 另外当 count 状态值发生变化的时候, 回调函数也会执行

  return (
    <div>
      <h2>{count}</h2>
      <hr />
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        新增
      </button>
      <hr />
      <h2>{count2}</h2>
      <button onClick={() => {
        setCount2(count2 + 1)
      }}>新增</button>
    </div>
  );
}
